<template>
	<view class="page_bg">
		<u-navbar title="专属会员" titleStyle="color:#fff;" :placeholder="true" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0,0,0,0)">
			
		</u-navbar>
		
		<view class="vip_info">
			<image class="bg" src="../../static/img/bg_5.png" mode="widthFix"></image>
			<image class="ico_v" src="../../static/img/img_vip.png" mode="widthFix"></image>
			<view class="vip_text">
				<view class="title">
					<text>小吉祥草王</text>的专属会员
				</view>
				<view class="text">
					加入我的会员吧！精心为您打造专属VIP会员权益
				</view>
				<view class="info">
					<view class="item">
						成员
						<text>12</text>
					</view>
					<view class="item">
						评分
						<text>5.0</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="vip_price">
			<view class="item" :class="priceIndex == 0?'hover':''" @click="clickPrice(0)">
				<view class="name">
					月度会员
				</view>
				<view class="time">
					1个月
				</view>
				<view class="num">
					￥<text>98</text>
				</view>
			</view>
			<view class="item" :class="priceIndex == 1?'hover':''" @click="clickPrice(1)">
				<view class="name">
					月度会员
				</view>
				<view class="time">
					1个月
				</view>
				<view class="num">
					￥<text>98</text>
				</view>
			</view>
			<view class="item" :class="priceIndex == 2?'hover':''" @click="clickPrice(2)">
				<view class="name">
					月度会员
				</view>
				<view class="time">
					1个月
				</view>
				<view class="num">
					￥<text>98</text>
				</view>
			</view>
		</view>
		
		<view class="vip_equity">
			<view class="title">
				会员高阶权益
			</view>
			<view class="list_item">
				<view class="ico"></view>
				<view class="info">
					<view class="name">
						解锁所有场景
					</view>
					<view class="text">
						可查看专属会员下所有场景
					</view>
				</view>
			</view>
			<view class="list_item">
				<view class="ico"></view>
				<view class="info">
					<view class="name">
						智能对话互动
					</view>
					<view class="text">
						每日可有3次智能对话互动
					</view>
				</view>
			</view>
			<view class="list_item">
				<view class="ico"></view>
				<view class="info">
					<view class="name">
						私人场景定制
					</view>
					<view class="text">
						免费赠送3次私人场景词条定制
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer_none">
			
		</view>
		<view class="vip_btn">
			开通会员（98元/月）
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				priceIndex:0
			}
		},
		onLoad() {

		},
		methods: {
			clickPrice(index){
				this.priceIndex = index
			}
		}
	}
</script>
<style>
.page_bg{
	background: linear-gradient(180deg, #624929 0%, #1F1F1F 40%, #1F1F1F 100%);
	min-height: 100vh;
}
</style>
<style lang="scss" scoped>
.footer_none{
	width: 100%;
	height: 160rpx;
}
.vip_btn{
	position: fixed;
	left:40rpx;
	right: 0;
	bottom: 60rpx;
	width: 670rpx;
	height: 70rpx;
	border-radius: 35rpx;
	background: #F7DF8F;
	line-height: 70rpx;
	text-align: center;
	font-size: 26rpx;
	font-weight: normal;
	color: #292D32;
}
.vip_equity{
	padding:60rpx 40rpx 0;
	.title{
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 44rpx;
		color: #FFFFFF;
	}
	.list_item{
		border-radius: 10rpx;
		background: #363433;
		margin-top: 30rpx;
		padding:30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.ico{
			flex-shrink: 0;
			width: 72rpx;
			height: 72rpx;
			background: rgba(216, 216, 216, 0.3);
			margin-right: 20rpx;
		}
		.info{
			width: 100%;
			.name{
				font-size: 26rpx;
				font-weight: 500;
				line-height: 40rpx;
				color: #FFFFFF;
			}
			.text{
				font-size: 20rpx;
				font-weight: 500;
				line-height: 30rpx;
				color: #A7A7A7;
				margin-top: 4rpx;
			}
		}
	}
}
.vip_price{
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	padding:60rpx 40rpx 0;
	.item{
		width: 202rpx;
		border-radius: 10rpx;
		background: #363433;
		text-align: center;
		padding:30rpx 0;
		box-sizing: border-box;
		border: 2rpx solid #363433;
		.name{
			font-size: 26rpx;
			line-height: 40rpx;
			color: #A7A7A7;
		}
		.time{
			font-size: 26rpx;
			font-weight: 500;
			line-height: 40rpx;
			color: #FFFFFF;
		}
		.num{
			font-size: 20rpx;
			font-weight: bold;
			line-height: 30rpx;
			color: #FFFFFF;
			padding-right: 20rpx;
			padding-top: 16rpx;
			text{
				font-size: 50rpx;
				font-weight: bold;
				line-height: 50rpx;
				color: #FFFFFF;
				padding-left: 5rpx;
			}
		}
		&.hover{
			border: 2rpx solid #F7DF8F;
			.name{
				color: #F7DF8F;
			}
			.time{
				color: #F7DF8F;
			}
			.num{
				color: #F7DF8F;
				text{
					color: #F7DF8F;
				}
			}
		}
	}
}
.vip_info{
	margin: 20rpx 40rpx 0;
	position: relative;
	.vip_text{
		position: absolute;
		lef:0;
		top:0;
		right: 240rpx;
		bottom: 0;
		padding:30rpx;
		.info{
			display: flex;
			align-items: center;
			padding-top: 32rpx;
			.item{
				font-size: 24rpx;
				font-weight: 500;
				line-height: 36rpx;
				color: #A7A7A7;
				text-align: center;
				margin-right: 30rpx;
				text{
					display: block;
					font-size: 30rpx;
					font-weight: 900;
					line-height: 44rpx;
					color: #FFFFFF;
				}
			}
		}
		.title{
			font-size: 36rpx;
			font-weight: normal;
			line-height: 54rpx;
			text-align: justify;
			color: #FFFFFF;
			text{
				font-size: 36rpx;
				font-weight: normal;
				line-height: 54rpx;
				text-align: justify;
				color: #F7DF8F;
				padding-right: 10rpx;
			}
		}
		.text{
			font-size: 20rpx;
			font-weight: normal;
			line-height: 30rpx;
			text-align: justify;
			color: #949494;
			padding-top: 10rpx;
		}
	}
	.ico_v{
		position: absolute;
		top:0;
		right: -40rpx;
		width: 278rpx;
		z-index: 9;
	}
	.bg{
		width: 100%;
	}
}
</style>
